<script setup lang="ts">
import { reactive } from 'vue'

const s = reactive({
  w: 0,
  h: 0
})

function onResize(size, target) {
  console.log(size, target)
  s.w = size.width
  s.h = size.height
}
</script>

<template>
  <div v-resize.immediate="onResize" class="scroll-container">
    <div class="v-scroll">
      <div class="content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<style scoped>
.scroll-container {
  width: 100%;
  height: 100%;
}

.v-scroll {
  width: calc(v-bind('s.h') * 1px);
  height: calc(v-bind('s.w') * 1px);
  position: relative;
  overflow: auto;
  transform-origin: 0 0;
  transform: translateY(calc(v-bind('s.h') * 1px)) rotate(-90deg);
}

.v-scroll::-webkit-scrollbar {
  width: 0;
}

.content {
  height: calc(v-bind('s.h') * 1px);
  position: absolute;
  left: 100%;
  transform-origin: 0 0;
  transform: rotate(90deg);
}
</style>
